<template>
	<view class="container">
		<view class="catalog">
			<view>
				<text>姓名</text>
				<input type="text" :disabled="hasAccount" v-model="userBank.userName" placeholder="请输入真实姓名" placeholder-class="plaho"/>
			</view>
			<view>
				<text>身份证号</text>
				<input :disabled="hasAccount" maxlength="18" v-model="userBank.idCard" placeholder="请输入身份证号" placeholder-class="plaho"/>
			</view>
			<view>
				<text>卡号</text>
				<input @input="getBankName" :disabled="hasAccount" type="number" v-model="userBank.account" placeholder="请输入银行卡号" placeholder-class="plaho"/>
			</view>
			<view>
				<text>银行</text>
				<input type="text" :disabled="hasAccount" v-model="userBank.bank" placeholder="请输入银行名称" placeholder-class="plaho"/>
			</view>
			<view @tap="openAddres3">
				<text>开户地区</text>
				<input type="text" :disabled="hasAccount" v-model="userBank.openAddress" placeholder="请输入详细开户地址" placeholder-class="plaho"/>
				<!-- <view>
					<text>{{ showAddress }}</text>
					<text v-if="!showAddress" style=" color: rgba(64,33,16,0.50); font-weight: normal;">请选择</text>
					<image v-if="!hasAccount" src="/static/icon1/17.png" mode="aspectFill"></image>
				</view> -->
			</view>
		</view>
		<simple-address ref="simpleAddress" :pickerValueDefault="cityPickerValueDefault" @onConfirm="onConfirm" themeColor="#007AFF"></simple-address>
		<view class="button" @click="handleBindBank(hasAccount)">{{ hasAccount ? '更改账号' : '立即绑定'}}</view>
	</view>
</template>

<script>
	import findKey from '@/libs/find-key.js'
	import bankCardAttribution from '@/libs/bank-card.js'
	import placesMap from '@/libs/place-map.js'
	import simpleAddress from '@/components/simple-address/simple-address.vue'
	export default {
		components: {
			simpleAddress
		},
		data() {
			return {
				hasAccount: false,
				startKey: [33, 3307, 330782],//初始开户地址
				cityPickerValueDefault: [16, 11, 0],
				pickerText: '',
				showAddress:'',//显示的开户地址
				userBank: { //提交账户参数
					account: '',
					userName: '',
					idCard: '',
					bank: '',
					openAddress: '',
					type: 2,//银行卡2
				},
				province: [],
				city: [],
				district: [],
				place: {},
				placeKey:[],
				p: '',
				provinceWord: '',
				c: '',
				cityWord: '',
				districtWord: '',
			}
		},
		methods: {
			// 弹出省市区选择框
			openAddres3() {
				// if(this.hasAccount) return
				// // 根据value ,
				// let index = this.$refs.simpleAddress.queryIndex(this.startKey, 'value');
				// console.log('openAddres3', index);
				// this.cityPickerValueDefault = index.index;
				// this.$refs.simpleAddress.open();
			},
			// 确认省市区
			onConfirm(e) {
				console.log('onConfirme', e)
				this.showAddress = e.label
				this.userBank.openAddress = e.provinceCode + ','+ e.cityCode + ',' + e.areaCode
				// this.pickerText = JSON.stringify(e);
				console.log('this.userBank.openAddress', this.userBank.openAddress)
			},
			// 提交绑定
			async handleBindBank(flag) {
				if (flag == true) {
					this.hasAccount = false
					this.userBank.account = ''
					this.userBank.userName = ''
					this.userBank.bank = ''
					this.userBank.idCard = ''
					this.userBank.openAddress = ''
					this.showAddress = ''
				}else {
					// this.userBank.bank = bankCardAttribution(this.userBank.account).bankName
					console.log('提交前this.userBank', this.userBank.bank, bankCardAttribution(this.userBank.account).bankName)
					if(!this.userBank.userName.trim()) return uni.showToast({ title: '请输入真实姓名~', icon: 'none' })
					if(!this.userBank.account.trim()) return uni.showToast({ title: '请输入银行账号~', icon: 'none' })
					if(this.userBank.idCard.length != 18) return uni.showToast({ title: '请输入正确身份证号~', icon: 'none' })
					if(!this.userBank.bank) return uni.showToast({ title: '请输入银行~', icon: 'none' })
					if(!this.userBank.openAddress) return uni.showToast({ title: '请选择开户地区~', icon: 'none' })
					let res = await this.$fetch(this.$api.bind_user_bank, this.userBank, 'POST', 'JSON')
					if (res.code) {
						uni.showToast({ title: res.msg, icon: 'none' })
						if(res.msg == '绑定失败:请先进行实名认证'){
							setTimeout(() => { uni.navigateTo({ url: '/pages/real-name/real-name' }) }, 800)
						}
						return
					}
					this.hasAccount = true
					uni.showToast({ title: '绑定成功~', icon: 'none' })
					setTimeout(() => { uni.navigateBack({ delta: 1 }) }, 800)
				}
				
			},
			
			// 获取银行名称
			getBankName() {
				console.log('银行名字', bankCardAttribution(this.userBank.account).bankName)
				if(bankCardAttribution(this.userBank.account).bankName == undefined) return
				this.userBank.bank = bankCardAttribution(this.userBank.account).bankName
				// '6217001210024455220'
			},
			
			// 取消选择
			cancelBind () {
				this.userBank.openAddress = ''
			},
			
			// 获取已绑定的账号
			async query_bind_user_bank () {
				let res = await this.$fetch(this.$api.query_bind_user_bank, {}, 'POST')
				if (res.code) return uni.showToast({ title: res.msg, icon: 'none' })
				res.data.forEach(item=> {
					if(item.type === 2) {
						this.userBank.account = item.account
						this.userBank.userName = item.userName
						this.userBank.idCard = item.idCard
						this.userBank.bank = item.bank
						this.userBank.openAddress = item.openAddress
					}
				})
				if(this.userBank.account) {
					this.hasAccount = true
					this.startKey = this.userBank.openAddress ? this.userBank.openAddress.split(',') : [33, 3307, 330782]
					console.log('this.startKey', this.startKey)
					this.showAddress = this.place[this.startKey[0]+'0000'] + '-'+ this.place[this.startKey[1]+'00'] + '-'+ this.place[this.startKey[2]]
				}
				
			},
		},
		
		onLoad() {
			this.place = placesMap()
			this.query_bind_user_bank()
		}
	}
</script>

<style lang="less">
.container {
	// border: 1px solid #000000;
	overflow: hidden;
	.catalog {
		margin-top: 30rpx;
		background-color: #FFFFFF;
		& > view {
			padding: 0 30rpx;
			position: relative;
			display: flex;
			align-items: center;
			justify-content: space-between;
			& > image {
				width: 16rpx;
				height: 26rpx;
			}
			& > text {
				height: 40rpx;
				margin: 30rpx 0;
			}
			& > input {
				flex: 1;
				text-align: right;
				font-size: 14px;
				font-weight: bold;
			}
			.plaho {
				font-weight: normal;
				font-size: 14px;
				color: rgba(64,33,16,0.50);
			}
			
			& > view {
				display: flex;
				align-items: center;
				& > text {
					font-weight: bold;
				}
				& > image {
					margin-left: 30rpx;
					width: 16rpx;
					height: 26rpx;
				}
			}
			&::after {
				content: "";
				position: absolute;
				top: 100rpx;
				width: 720rpx;
				height: 2rpx;
				background: #F2F2F2;
			}
		}
	}
	.button {
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 100rpx;
		background: #FCC928;
		display: flex;
		justify-content: center;
		align-items: center;
		letter-spacing: 0;
		
		&:active {
			opacity: 0.7;
		}
	}
}
</style>
